<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="icon" href="/favicon.svg" type="image/x-icon" />
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        html,
        body {
            margin: 0;
            height: 100%;
            width: 100%;
        }

        * {
            box-sizing: border-box;
        }

        #app,
        .canvas_body {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
    </style>
    <script src="/index.umd.js"></script>
    <script src="/rect/react.development.js"></script>
    <script src="/rect/react-dom.development.js"></script>
    <script src="/rect/babel.min.js"></script>
</head>

<body>
    <div id="app"></div>
    <script type="text/babel">
        const CANVAS_W = 1000
        const CANVAS_H = 1000
        /*
         * 随机位置获取
         */
        function randomNum(min,max){
            const range = max - min;
            const rand = Math.random();
            const num = min + Math.round(rand * range);
            return num;
        }

        class MapBox extends React.Component {

            constructor() {
                super();
                this.state = {
                    mapComp: '',
                }
            }

            componentDidMount = () => {
                
                this.setState({
                    mapComp: new tetris.MapEditor({
                        domId: 'container',
                        width: window.innerWidth,
                        height: window.innerHeight,
                    })
                })

            }

            render = () => {

                return (
                    <div className="canvas_body">
                        <div id="container" ></div>
                    </div>
                )
            }
        }
        ReactDOM.render(<MapBox />,
            document.getElementById('app'),
        )
    </script>
</body>

</html>